<template>
  <div class="wrapper" ref="wrapper1">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import BetterScroll from 'better-scroll'
import {onMounted, reactive,ref} from "vue";
export default {
  name: "PublicScroll",
  props:{
    probeType:{
      type:Number,
      default:0
    },
    pullUpLoad:{
      type:Boolean,
      default:true
    }
  },
  setup(props,context){
    let bs=reactive(undefined)
    let wrapper1=ref(null)
    //方法
    //返回顶部的方法
    function scrollToTop(x,y,time=500){
      bs.scrollTo(x,y,time)
    }
    //加载大量图片后重新加载高度
    function scrollRefresh(){
      console.log('scrollRefresh被调用了')
      bs.refresh()
    }
    //生命周期
    onMounted(()=>{
       bs=new BetterScroll(wrapper1.value,{
          click:true,
          probeType:props.probeType,
          pullUpload:props.pullUpLoad,
          mouseWheel: true, //鼠标滚轮滚动
          disableMouse: false,// 启用鼠标拖动
       })
       // 如果父组件传过来的值为3或者2那么开启滚动
       if(props.probeType===3||props===2){
          bs.on('scroll',(position)=>{
            context.emit('scrollY',position.y)
          })
       }
       //下拉加载更多
       if(props.pullUpLoad){
          bs.on('scrollEnd',()=>{
            context.emit('loadMore')
          })
       }
    })
    return{
      wrapper1,
      scrollToTop,scrollRefresh
    }
  }
}
</script>

<style scoped>
.wrapper{
  height: 100%;
  overflow: hidden;
}
</style>